<template>
  <div>
    <h2>新增患者</h2>
    <el-form :model="patient" :rules="rules" ref="patientForm" label-position="left" label-width="130px" @submit.prevent="submitForm">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="patient.name" placeholder="输入患者姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="patient.gender" placeholder="选择性别">
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input-number v-model="patient.age" :min="0" placeholder="输入患者年龄"></el-input-number>
      </el-form-item>
      <el-form-item label="所在医院" prop="hospital">
        <el-input v-model="patient.hospital" placeholder="输入患者所在医院"></el-input>
      </el-form-item>
      <el-form-item label="癌种" prop="cancerType">
        <el-input v-model="patient.cancerType" placeholder="输入癌种类型"></el-input>
      </el-form-item>
      <el-form-item label="免疫用药情况" prop="immunotherapyMedication">
        <el-input v-model="patient.immunotherapyMedication" placeholder="输入用药情况"></el-input>
      </el-form-item>
      <el-form-item label="第一次采样时间" prop="firstSamplingDate">
        <el-date-picker v-model="patient.firstSamplingDate" type="date" placeholder="请选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { createPatient } from '../../api/patient';

interface Patient {
  id: number | null;
  userId: number;
  name: string;
  gender: number | null;
  age: number | null;
  hospital: string;
  cancerType: string;
  immunotherapyMedication: string;
  firstSamplingDate: Date | null;
}

const router = useRouter();

const patient = reactive<Patient>({
  id: null,
  userId: 1,
  name: '',
  gender: null,
  age: null,
  hospital: '',
  cancerType: '',
  immunotherapyMedication: '',
  firstSamplingDate: null,
});

const rules = {
  name: [
    { required: true, message: '请输入患者姓名', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  age: [
    { required: true, type: 'number', message: '请输入患者年龄', trigger: 'blur' }
  ],
  hospital: [
    { required: true, message: '请输入所在医院', trigger: 'blur' }
  ],
  cancerType: [
    { required: true, message: '请输入癌种类型', trigger: 'blur' }
  ],
  immunotherapyMedication: [
    { required: true, message: '请输入用药情况', trigger: 'blur' }
  ],
  firstSamplingDate: [
    { required: true, type: 'date', message: '请选择第一次采样时间', trigger: 'change' }
  ]
};

const patientForm = ref(null);

const submitForm = async () => {
  try {
    await (patientForm.value as any).validate(async (valid: boolean) => {
      if (valid) {
        const response = await createPatient(patient);
        const pId = response.data.id;

        if (pId) {
          router.push({ name: 'PatientBasicInfo', params: { patientId: pId } });
        } else {
          console.error('Missing patient ID in response:', response);
          alert('提交成功，但未返回患者 ID');
        }
      } else {
        console.error('表单验证失败');
      }
    });
  } catch (error) {
    console.error('Error submitting patient information:', error);
    alert('提交失败，请重试');
  }
};


</script>

<style scoped>
.el-form {
  width: 400px;
  margin-left: 220px;
  padding: 20px;
}
</style>
